<my-pageheader></my-pageheader>
<mat-card style="margin: 20px 20px 50px 20px">
    <h2 align="center">人脸识别</h2>
    <br><br>

    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <div>
                <input type="file" ng2FileSelect [uploader]="fileSelector" accept=".jpg, .jpeg, .png, .gif, image/*" [disabled]="sending1 || sending2" />
            </div>
            <br>
            <div>
                <img style="max-width: 100%" src="{{inputImgUrl}}" alt="">
            </div>
        </mat-card>
    </div>
    <div class="row justify-content-center">
        <mat-card style="width: 90%; margin-top: 20px">
            <div *ngIf="outputImgUrl && !sending1 && faces.length > 0">
                <img style="max-width: 100%" src="{{outputImgUrl}}" alt="">
            </div>
            <p *ngIf="outputImgUrl && !sending1 && faces.length < 1" style="color: red">
                没找到人脸...
            </p>
            <p *ngIf="!inputImgUrl && !sending1">识别结果</p>
            <p *ngIf="sending1">正在努力识别...</p>
            <mat-spinner *ngIf="sending1"></mat-spinner>
            <p *ngIf="error">出错啦...</p>
        </mat-card>
    </div>
    <div class="row justify-content-center" *ngIf="outputImgUrl && faces.length === 1">
        <mat-card style="width: 90%; margin-top: 20px">
            <div>
                <p>这个人是： <span style="font-size: larger; color: blue">{{faces[0][0]}}</span></p>
                <p>认错啦？没关系！</p>
                <p>请输入正确姓名将其添加到后台数据库：</p>
                <br>
                <div>
                    <mat-form-field>
                        <input matInput [(ngModel)]="name" type="text" placeholder="姓名">
                    </mat-form-field>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <button mat-raised-button color="primary" (click)="add_face()" [disabled]="sending1 || sending2 || !inputImgUrl || !name">
                        添加人脸
                    </button>
                </div>
                <br>
                <p>{{result}}</p>
                <mat-spinner *ngIf="sending2"></mat-spinner>
            </div>
        </mat-card>
    </div>
</mat-card>
